<template>
  <div class='u-course_detail_lessonDialog m-courseSignUp_dialog'>
    <el-dialog ref='dialog'
      title="选择课程"
      :visible.sync="dialogVisible"
      :before-close="() => {this.dialogVisible = false}"
    >
      <el-form label-width="80px" class='top' :inline='true'>
        <attr-search ref='attrSearch' :isNotGetAttrsData='false' aType='0' />
        <el-form-item label='商品名称'>
          <el-input style='width: 228px;' v-model.trim='name' />
          <el-button style='margin-left: 20px;' @click='clearSearch'>清空</el-button>
          <el-button type='primary' @click='searchFun'>搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- table -->
      <el-table ref='singleTable' class="table" :data="data" border @current-change='handleCurrentChange' 
         style='width: 100%' highlight-current-row>
         <el-table-column align='center' property='name' label='课程名称' />
         <el-table-column align='center' property='title' label='所属分类' min-width='150' />
         <el-table-column align='center' property='sold' label='目前人数' width='80' />
         <el-table-column align='center' property='price' label='价格' width='80' />
      </el-table>

      <div class='u-pagination'>
        <!-- 分页 -->
        <pagination ref='page' @change='getData' :action='fetchData' :pageSize='5'></pagination>
      </div>
      <div class="btnWrap">
        <el-button type='primary' @click='confirm'>确定</el-button><el-button @click='hide'>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AttrSearch from '@/components/business/AttrSearch'

export default {
  name: 'u-course_detail_lessonDialog',

  components: {
    AttrSearch
  },

  data() {
    return {
      dialogVisible: false,
      tableKeys: [
        { prop: 'name', label: '课程名称', minWidth: '100' },
        { prop: 'title', label: '所属分类', minWidth: '100' },
        { prop: 'sold', label: '目前人数', minWidth: '100' },
        { prop: 'price', label: '价格', minWidth: '100' }
      ],
      data: [],
      name: '',
      currentRow: {}
    }
  },

  methods: {
    handleCurrentChange(val) {
      this.currentRow = val
      console.log(val)
    },

    async fetchData(aPageNum, aPageSize) {
      const params = {
        aPageNum,
        aPageSize,
        aGoodsType: 1,
        aStatus: 1,
        aMerchantId: this.aFirmId
      }
      const name = this.name
      params.aAttrs = this.$refs.attrSearch.getData()
      if (name || name === 0) params.aName = name
      return this.$api.supplyGetMySkus(params)
    },

    getData(data) {
      this.data = data
    },

    show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.data.length <= 0) {
          this.$refs.page.changePage()
        }
      })
    },

    clearSearch() {
      this.name = ''
      this.$refs.attrSearch.clear()
      this.searchFun()
    },

    searchFun() {
      this.$refs.page.changePage()
    },

    hide() {
      this.dialogVisible = false
    },

    confirm() {
      this.dialogVisible = false
      this.$emit('getData', this.currentRow)
    }
  }
}
</script>

<style lang='less'>
.u-course_detail_lessonDialog {}
</style>